<template>
	<div>
		<el-form :model="formData" label-width="120px" :rules="rules" ref="applyformAddRef">
<!-- 			<el-row class="settlementClass">
				<el-col :span="6">
					<el-form-item label="年度开账">
						<el-radio-group v-model="formData.settlement" @input="radioEvent">
							<el-radio :label="true">是</el-radio>
							<el-radio :label="false">否</el-radio>
						</el-radio-group> 
					</el-form-item>
				</el-col>				
				<el-col :span="6"  v-show="formData.settlement">
					<el-form-item label="数据年份">
						<el-date-picker type="year" v-model="formData.settlementNumber" value-format="yyyy" @change="SettlementNumberEvent"></el-date-picker>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row v-if="CheckSettlementResult.StatusCode==500 && CheckSettlementResult.Message!=''">
				<el-col :span="24">
					<el-form-item label="提示:">
						<p style="color: #E6A23C;margin: 0px 0px;">{{ CheckSettlementResult.Message }}</p> 
					</el-form-item>
				</el-col>
			</el-row> -->
			<el-form-item label="项目名称">
				<el-input v-model="project.ProjectName" disabled></el-input>
			</el-form-item>
			<el-row>
				<el-col :span="6">
					<el-form-item label="报销类别" prop="reimType">
						<el-select v-model="formData.reimType" style="width: 100%;">
							<el-option v-for="(item,index) in $parent.$parent.ResEnum" :value="item.Value"
								:label="item.Description"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="申报人" prop="borrower">
						<el-select v-model="formData.borrower" style="width: 100%;">
							<el-option v-for="(item,index) in $store.state.AllUsers" :value="item.Id"
								:label="item.UserName" v-if="item.RoleId != '1'"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="申报时间" prop="borrowTime">
						<el-date-picker style="width: 99%;" v-model="formData.borrowTime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期">
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="申报金额" prop="money">
						<el-input v-model="formData.money" disabled></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<el-form-item label="报销内容" prop="content">
						<el-input v-model="formData.content" type="textarea"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="摘要" prop="abstract">
						<el-input v-model="formData.abstract" type="textarea"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="3">
					<el-form-item label="资料文件上传">
						<UploadFileF ref="AnotherData" :multiple="true" :another-data="AnotherData" listtype="picture"
							:showfilelist="true" :upshow="false" content="上传文件" btnsize="medium"></UploadFileF>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="24">
					<el-button type="primary" icon="el-icon-plus" size="mini" @click="addDetaliEvent()">添加明细</el-button>
					<el-table :data="formData.reimRuleList" style="width: 100%;" ref="multipleTable"
						:cell-style="{ padding: '5px 0 ' }">
						<el-table-column header-align="center" fixed prop="reimRuleContent" label="报销内容" align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.reimRuleContent"></el-input>
							</template>
						</el-table-column>
						<el-table-column header-align="center" fixed prop="abstract" label="内容摘要" align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.abstract"></el-input>
							</template>
						</el-table-column>
						<el-table-column header-align="center" fixed prop="reimRuleCertificate" label="报销凭证"
							align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.reimRuleCertificate"></el-input>
							</template>
						</el-table-column>
						<el-table-column header-align="center" fixed prop="reimRuleMoney" label="金额" align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.reimRuleMoney" @blur="moneyEvent(scope.row)"></el-input>
							</template>
						</el-table-column>
						<el-table-column header-align="center" fixed prop="remark" label="备注" align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.remark"></el-input>
							</template>
						</el-table-column>
						<el-table-column header-align="center" prop="UserNumber" align="center" label="操作"
							width="120px">
							<template slot-scope="scope">
								<el-button type="text" plain size="mini" style="color: #F56C6C;"
									@click="tableHandler(scope.$index,scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="24" align="right">
					<el-button type="primary" @click="AddHDFinanceReimbursementHandle()">保存</el-button>
				</el-col>
			</el-row>
		</el-form>
	</div>
</template>

<script>
	import dayjs from 'dayjs'
	import { CheckAmount } from "../../../../public/Scriput/Public.js"
	import UploadFileF from "../../UploadFileF";
	export default {
		components:{
			UploadFileF
		},
		props: {
			project: {
				type: Object,
				required: false
			},
			closeFun: {
				type: Function,
				reuqired: false,
			},
		},
		data() {
			var priceRule = (rule, value, callback) =>{
				if(value == '') callback(new Error('请输入申报金额'))
				else if(!CheckAmount(value)) callback(new Error('请填写有效的申报金额(保留两位小数)'))
				else callback()
			};
			return {
				formData: {
					settlementNumber: '',
					settlement:false,
					borrower: '',
					borrowTime: '',
					projectId: 0,
					projectName: '',
					reimType: "",
					money: '',
					content: "",
					abstract: "",
					remark: "",
					financeReimbursementStart: 0,
					reimRuleList: []
				},
				projectUserList: [],
				selectEdUserList: [],
				rules: {
					reimType: [{
						required: true,
						message: '请选择报销类型',
						trigger: 'change'
					}],
					borrower: [{
						required: true,
						message: '请选择申报人',
						trigger: 'change'
					}],
					borrowTime: [{
						required: true,
						message: '请选择日期',
						trigger: 'change'
					}],
					content: [{
						required: true,
						message: '请填写申报内容',
						trigger: 'blur'
					}],
				},
				AnotherData: {
					//项目模块
					FileType: 512,
					//项目Id号
					id: 0,
					//Type：1：收方工资单 2、应发工资单、3报销单 
					Type: 3,
					Single: false,
				},
				CheckSettlementResult:{
					Status: true,
					Message:'',
				},
			}
		},
		computed: {
			gettotalPrice() {
				const {
					squarequantity,
					price
				} = this.formData || 0
				this.formData.totalprice = squarequantity * price
			}
		},
		created() {
			this.formData.projectId = this.project.Id
			this.formData.projectName = this.project.ProjectName
			this.getPorjectUsers()
		},
		mounted() {

		},
		methods: {
			//新建明细
			addDetaliEvent() {
				this.formData.reimRuleList.push({
					reimRuleMoney: 0,
					reimRuleContent: "",
					abstract: "",
					reimRuleCertificate: "",
					remark: "",
					financeReimbursementStart: 0
				})
			},
			//表格操作
			tableHandler(index, row) {
				this.formData.reimRuleList.splice(index, 1)
			},
			//添加财务报销报表
			AddHDFinanceReimbursementHandle() { 
				let _this = this
				if(this.formData.reimRuleList.length == 0){
					this.$message.warning('请添加报销明细!')
					return
				}
				this.$refs.applyformAddRef.validate((valid) => {
					if (valid) {
						_this.$http.post('NewFinanceReimbursementReim/AddHDFinanceReimbursement', {
							..._this.formData,
						}).then(res => {
							const {
								StatusCode,
								Data,
								Message
							} = res.data || 0
							if (StatusCode == 200) {
								_this.$message.success('添加成功')
								if (this.$refs['AnotherData'].fileList.length > 0) {
									this.AnotherData.id = Data.id || Data.Id;
									this.$refs['AnotherData'].submitUpload()
								}
								_this.closeFun()
								_this.clearFormData()
							}else{
								this.$message.warning(Message)
							}
						})
					}
				})

			},
			//获取项目下的人员
			getPorjectUsers() {
				this.projectUserList = []
				let {
					UserIds
				} = this.project || ''
				let ids = UserIds.split(',')
				ids.forEach(x => {
					let user = this.$store.state.AllUsers.find(u => u.Id == x) || undefined
					if (user != undefined) this.projectUserList.push(user)
				})
			},
			//清空表单数据
			clearFormData(){
				this.$refs.applyformAddRef.resetFields()
				this.formData.reimRuleList = []
				this.$refs.AnotherData.clearfilelist()
			},
			//价格计算
			moneyEvent(row){
				if(!CheckAmount(row.reimRuleMoney)){
					row.reimRuleMoney = ''
					this.$message.warning('请填写有效的申报金额(保留两位小数)')
				}else{
					this.formData.money = (this.formData.reimRuleList.reduce((prev, curr)=>{
						const { reimRuleMoney } = curr || 0
						let num = reimRuleMoney == ''?0:Number(reimRuleMoney)
						return prev + num
					},0)).toFixed(2)				
				}
			},
			radioEvent(value){
				if(!value) {
					this.formData.settlementNumber = ''
					this.CheckSettlementResult = {
						Status: false,
						Message:'',
						StatusCode:500,
					}
				}
			},
			//时间选择事件
			SettlementNumberEvent(value) {
				if (value == '') return
				this.$http.post('NewFinanceReimbursementReim/CheckSettlement', {
					settlementNumber: value,
					projectId: this.project.Id
				}).then(res => {
					this.CheckSettlementResult = res.data
				})
			},
			// //修改已经扎帐订单,请谨慎操作
			// IsUpSettlementHandler(){
			// 	if(!this.formData.settlement){
			// 		this.AddHDFinanceReimbursementHandle()
			// 	}else{
			// 		//不存在已扎帐
			// 		if(this.CheckSettlementResult.StatusCode==200){
			// 			this.AddHDFinanceReimbursementHandle()
			// 		}else{
			// 			//存在已扎帐,修改原数据
			// 			this.$http.post('NewFinanceReimbursementReim/UpSettlement', {
			// 				settlementNumber: this.formData.settlementNumber,
			// 				projectId: this.project.Id
			// 			}).then(res => {
			// 				const {
			// 					StatusCode,
			// 					Data,
			// 					Message
			// 				} = res.data || 0
			// 				if (StatusCode == 200){
			// 					this.AddHDFinanceReimbursementHandle()
			// 				}else{
			// 					this.$message.warning(Message)
			// 				}
			// 			})					
			// 		}					
			// 	}
			// }
		},
	}
</script>

<style scoped>
	.settlementClass .el-form-item{
		margin-bottom: 10px !important;
	}
</style>